<!DOCTYPE html >
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="keys" content="">
    <meta name="author" content="">
    <base th:href="@{/}">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/login.css">
    <script type="text/javascript" src="jquery/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="layer/layer.js"></script>
    <script type="text/javascript">
        $(function () {

            $("#sendCode").click(function () {

                // 获取用户输入的手机号
                var phoneNum = $.trim($("[name=phoneNum]").val());
                var loginAcct = $.trim($("[name=loginAcct]").val());
                var userPswd = $.trim($("[name=userPswd]").val());
                var email = $.trim($("[name=email]").val());

                // 表单所填信息不能为空
                if(loginAcct != null && loginAcct != "" && phoneNum != null && phoneNum != "" &&
                    userPswd != null && userPswd != "" && email != null && email != "") {
                    // 根据手机号发送ajax请求
                    $.ajax({
                        "url": "/auth/member/send/short/message.json",
                        "type": "post",
                        "data": {
                            "phoneNum": phoneNum
                        },
                        "dataType": "json",
                        "success": function (response) {
                            if (response.result == "SUCCESS") {

                                layer.msg("发送成功");
                                // 短信发送成功后，给按钮倒计时，防止频繁发送
                                send();
                            } else {

                                layer.msg("发送失败,请重试");
                            }
                        },
                        "error": function (response) {

                            layer.msg(response.status + " " + response.statusText);
                        }
                    })

                } else{

                    // 如果表单信息为空，则提示该信息
                    layer.msg("请填写完整信息！");
                }

            });
        });


        // "获取验证码"按钮倒计时函数
        function send() {
            var time = 30;

            function downTime() {
                time--;
                $("#sendCode").attr({"disabled": "disabled"});
                $("#sendCode").text(time + ' S后重获');
                if (time == 0) {
                    $("#sendCode").removeAttr('disabled');
                    clearInterval(n);
                    $("#sendCode").text('发送验证码');
                }
            }

            var n = setInterval(downTime, 1000);
        };

    </script>
    <style>

    </style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <div><a class="navbar-brand" href="index.html" style="font-size:32px;" th:href="@{/}">爱众筹-创意产品众筹平台</a></div>
        </div>
    </div>
</nav>

<div class="container">

    <form action="/auth/do/member/register" method="post" class="form-signin" role="form">
        <h2 class="form-signin-heading"><i class="glyphicon glyphicon-log-in"></i> 用户注册</h2>
        <p th:text="${message}" style="color: red">这里显示从请求域取出的提示消息</p>
        <div class="form-group has-success has-feedback">
            <input type="text" name="loginAcct" class="form-control" id="inputSuccess4" placeholder="请输入登录账号" autofocus>
            <span class="glyphicon glyphicon-user form-control-feedback"></span>
        </div>
        <div class="form-group has-success has-feedback">
            <input type="text" name="userPswd" class="form-control" placeholder="请输入登录密码" style="margin-top:10px;">
            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
        </div>
        <div class="form-group has-success has-feedback">
            <input type="text" name="email" class="form-control" placeholder="请输入邮箱地址" style="margin-top:10px;">
            <span class="glyphicon glyphicon glyphicon-envelope form-control-feedback"></span>
        </div>
        <div class="form-group has-success has-feedback">
            <input type="text" name="phoneNum" class="form-control" placeholder="请输入手机号" style="margin-top:10px;">
            <span class="glyphicon glyphicon glyphicon-earphone form-control-feedback"></span>
        </div>
        <div class="form-group has-success has-feedback">
            <input type="text" name="code" class="form-control" placeholder="请输入验证码" style="margin-top:10px;">
            <span class="glyphicon glyphicon glyphicon-comment form-control-feedback"></span>
        </div>
        <button id="sendCode" type="button" class="btn btn-lg btn-success btn-block"> 获取验证码</button>
        <button type="submit" class="btn btn-lg btn-success btn-block">注册</button>
    </form>
</div>
</body>
</html>